<template>
	<div class="loginContent">
		<div :class="[{'on' : isLoginOpen}, 'popup']"></div>
		<div :class="[{'on' : isLoginOpen}, 'login-main']">
			<!--积分-->
			<img v-if="integral && step == 0" class="integral_img" @click="login" src="../assets/image/pop_up_wechat.png">
			<!--登录-->
			<div :class="[{'on': step == 1}, 'login']">
				<div class="logobar"><img class="logo" src="../assets/image/LOGO.png"></div>
				<ul class="logolist">
					<li class="logoli fix">
						<input type="text" placeholder="手机号码" v-model="mobile" maxlength="11" >
						<img class="cleartext fr" @click="clear" src="../assets/image/ico_delete_txt.png">
					</li>
					<li class="logoli fix">
						<input type="text" placeholder="6位验证码" v-model="verifyCode" maxlength="6" onkeyup="value=value.replace(/[^\d]/g,'')">
						<span class="rightbutton fr" v-on:click="sendCode(this)">{{codemessage}}</span>
						<span class="rightbutton retry fr hidden">发送失败 重发</span>
						<span class="rightbutton retry2 fr hidden">再次发送</span>
					</li>
				</ul>
				<div :class="[{'hidden' : fault}, 'fault']">{{hint}}</div>
				<div v-if="this.verifyCode==''" class="classA">{{isUser ? "登录" : "领取"}}</div>
				<div v-else class="classB" v-on:click="getIt(this)">{{isUser ? "登录" : "领取"}}</div>
			</div>
			<!--领取成功-->
			<div :class="[{'on': step == 2}, 'getthesuccess']">
				<img class="gts_img" src="../assets/image/mascot_receipt.png">
				<img class="QRcode_img" src="../assets/image/QRcode.jpg">
				<div class="gts_txt">关注公众号 查看更多优惠</div>
				<div class="gts_txt2">领取成功!</div>
			</div>
			<!--已领取-->
			<img class="getitend hidden" src="../assets/image/mascot_remind_img.png">

			<!--关闭-->
			<img class="close" @click="close" src="../assets/image/close.png">
		</div>
		<div :class="[{'on' : isIntegral && !isUser}, 'open']" @click="getIntegral"><img class="open_img" src="../assets/image/pop_up_close_wechat.png"></div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import store from '../assets/js/store.js'

export default {
	name: 'app',
	data () {
		return {
			loginContent: 'hidden',
			popup: '',
			step : 0,
			open: 'hidden',
			mobile: '',
			verifyCode: '',
			code: '',
			deviceNumber: 'imei123456',
			loginType: '300',
			sourceAppid: 'weixin2017',
			loginData:[],
      		countdown: 60,
			codemessage: '获取验证码',
			firstTime: true,
			hint: '',
			fault: true,
			isIntegral: false,
			integral: false,
			scrollTop: 0,
		}
	},
	mounted:function () {
		let _this = this;
		this.integral = this.$store.getters.getIntegral
		if(this.integral)  {
			this.step = 0;
		}else {
			this.step = 1;
		}
		if(!this.$store.getters.getIsUser && this.integral) {
			setTimeout(function () {
				_this.$store.commit('upLoginOpen', { isOpen : true});
			}, 3000)
		}

		document.addEventListener("scroll", () => {
			var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
			document.querySelector(".login-main").style = 'top:' +(scrollTop + 80)+"px";
		})
	},
	watch : {
	    mobile () {
	        this.mobile = this.mobile.replace(/[^\d]/g, '');
	    }
    },
	methods:{
		close () {
			this.$store.commit('upLoginOpen', { isOpen : false});
			this.integral || (this.step = 1);
			this.isIntegral = this.$store.getters.getIntegral;

			//如果没有领取则打开小图标
			if(!this.$store.getters.getIsUser && this.$store.getters.getIntegral) {
				this.isIntegral = true;
			}
			Util.ajaxPath.bus.$emit('upNickName', 3333);
		},
		getIntegral () {
			this.$store.commit('upLoginOpen', { isOpen : true, integral : this.integral});
			this.isIntegral = false;
		},
		login () {
			this.step = 1;
		},
		clear () {
			this.mobile = '';
		},
		//倒计时功能
		settime (elem) {
			let that = this;
			if (this.countdown == 0) {
				if(this.firstTime) {
					this.codemessage = "获取验证码";
				}else {
					this.codemessage = "再次发送";
				}
				this.countdown = 60;
			} else {
				this.countdown--;
				this.codemessage = this.countdown + "秒后重发";
				setTimeout(function() {
					that.settime(elem);
				}, 1000)
			}
		},
		//发送验证码
		sendCode (elem) {
			//手机
			this.firstTime = this.firstTime ? '': '';
			const phoneReg = /^1[3|4|5|7|8]{1}\d{9}/;
			const type = 'register';
			if(!phoneReg.test(this.mobile)) {
				this.fault = false;
				this.hint = "请输入正确手机号码";
				return;
			}else{
				this.fault = true;
			}

			//防止连续发送
			if(this.countdown == 60) {
				this.settime(elem, this.countdown)

				//请求
				var _this = this;
				this.$http.get(Util.ajaxPath.devLoginUrl+"shop-password/sr/userInfo/loginVerifyCode/"+this.mobile).then(function (res) {
					_this.loginData = res.body.content;
				});
			}
		},
		// 登录
		getIt (elem) {
			// 请求
			var _this = this;
			this.$http.post(Util.ajaxPath.devLoginUrl+"shop-password/sr/userInfo/login",{mobile: this.mobile, verifyCode: this.verifyCode, code: this.code, deviceNumber: this.deviceNumber, loginType: this.loginType, sourceAppid: this.sourceAppid}).then(response => {
				_this.loginData = response.body.content;
				if(response.body.state === 'error') {
					this.fault = false;
					this.hint = response.body.content.statusMsg;
					return;
				}else{
					this.fault = true;
					this.$store.commit('upIsUser', { isUser: true});
					this.step = 2;
					Util.ajaxPath.bus.$emit('upNickName', response.body.content.nickname || response.body.content.mobile);
					localStorage.setItem("token", response.body.content.code);
					localStorage.setItem("userId", response.body.content.id);
					localStorage.setItem("mobile", response.body.content.mobile);
				}
			}, response => {
			});
		},
	},
	computed: {
	    isUser () {
	      return store.state.isUser
	    },
	    isLoginOpen () {
	      return store.state.isLoginOpen
	    }
  	}
}
</script>
<style lang="scss">
.loginContent{
	width: 100%; height: 100%; background: #fff;

	.login-main {position: absolute;width: 6rem;height: 5.26rem;left: 0;right: 0;margin: auto;top: 2rem;z-index: 22; display: none;
		&.on {display: block;}
	}
	// 弹窗
	.popup{ width: 100%; height: 100%; background: rgba(21,21,23,.2); position: fixed; left: 0; top: 0; right: 0; z-index: 20; display: none;
		&.on {display: block;}
	}
	// 积分
	.integral_img{width: 6.19rem; height: 5.98rem; }
	// 关闭
	.close{ display: block; margin: 1.0rem auto 0; width: 0.5rem; height: 0.5rem;  z-index: 21; }
	// 登录
	.login{padding-top: 0.6rem; width: 6rem; height: 5.26rem; background: #fff; border-radius: 0.2rem; overflow: hidden; position: relative; display: none;
		&.on {display: block;}
	}
	.logobar{ height: 0.96rem; border-left: 0.1rem solid #ff365d; }
	.logo{ display: block; padding: 0.17rem 0 0 0.3rem; width: 1.08rem; height: 0.62rem; }
	.logolist{ padding: 0.3rem 0.3rem 0; }
	.logoli{
		padding: 0.38rem 0 0 0.1rem; height: 0.68rem; color: #aaa; border-bottom: 1px solid #ddd;
		input{ float: left; line-height: 0.68rem; font-size: 0.28rem; border: none; outline: medium; }
		.rightbutton{ line-height: 0.68rem; font-size: 0.22rem; color: #ff365d; }
		.cleartext{ display: block; padding-top: 0.18rem; width: 0.28rem; height: 0.28rem; }
	}
	.fault{ padding-top: 0.4rem; height: 0.22rem; line-height: 0.22rem; text-align: center; font-size: 0.22rem; color: #ff365d; }
	.classA{ width: 100%; height: 0.88rem; line-height: 0.88rem; text-align: center; font-size: 0.28rem; color: #fff; background: #aaa; position: absolute; left: 0; bottom: 0; z-index: 22; }
	.classB{ width: 100%; height: 0.88rem; line-height: 0.88rem; text-align: center; font-size: 0.28rem; color: #fff; background: #ff365d; position: absolute; left: 0; bottom: 0; z-index: 22; }
	// 领取成功
	.getthesuccess{ margin: 0 auto; width: 6rem; height: 5.86rem; background: #fff; border-radius: 0.2rem; position: relative; display: none;
		&.on{display: block;}
	}
	.gts_img{ display: block; margin-left: -1.43rem; width: 2.87rem; height: 2.4rem; position: absolute; left: 50%; top: -0.98rem; }
	.QRcode_img{ display: block; margin: 0 auto; padding-top: 1.64rem; width: 2.6rem; height: 2.6rem; }
	.gts_txt{ padding-top: 0.1rem; height: 0.2rem; line-height: 0.2rem; text-align: center; font-size: 0.2rem; color: #333; }
	.gts_txt2{ padding-top: 0.42rem; height: 0.36rem; line-height: 0.36rem; text-align: center; font-size: 0.36rem; color: #ff365d; }
	// 已领取
	.getitend{ margin-left: -3.08rem; width: 6.17rem; height: 1.49rem; position: fixed; left: 50%; top: 5.7rem; z-index: 22; }
	// 打开
	.open{ width: 1.2rem; height: 1.2rem; position: fixed; right: 0.3rem; bottom: 1.3rem; z-index: 10; display: none;
		&.on {display: block;}
	}
	.open_img{ display: block; width: 1.2rem; height: 1.2rem; }
}
</style>
